'use strict';

import React, {Component} from 'react';
const ReactNative = require('react-native');
const {
	StatusBar,
	StyleSheet,
	Text,
	TouchableHighlight,
	View,
	AppRegistry,
} = ReactNative;



const colors = [
	'#ff0000',
	'#00ff00',
	'#0000ff',
];

const barStyles = [
	'default',
	'light-content',
];

const showHideTransitions = [
	'fade',
	'slide',
];

function getValue(values, index) {
	return values[index % values.length];
}

class StatusBarTranslucentExample extends React.Component {
	state = {
		translucent: false,
		animated: true,
		backgroundColor: getValue(colors, 0),
	};

	_colorIndex = 0;

	_onChangeBackgroundColor = () => {
		this._colorIndex++;
		this.setState({backgroundColor: getValue(colors, this._colorIndex)});
	};

	_onChangeAnimated = () => {
		this.setState({animated: !this.state.animated});
	};

	_onChangeTranslucent = () => {
		this.setState({
			translucent: !this.state.translucent,
		});
	};

	render() {
		return (
			<View>
				<StatusBar
					backgroundColor={this.state.backgroundColor}
					animated={this.state.animated}
					translucent={this.state.translucent}
				/>
				<TouchableHighlight
					style={styles.wrapper}
					onPress={this._onChangeBackgroundColor}>
					<View style={styles.button}></View>
				</TouchableHighlight>
				<Text>Hi There!!</Text>
			</View>
		);
	}
}

var styles = StyleSheet.create({
	wrapper: {
		borderRadius: 5,
		marginBottom: 5,
	},
	button: {
		borderRadius: 5,
		backgroundColor: '#eeeeee',
		padding: 10,
	},
	title: {
		marginTop: 16,
		marginBottom: 8,
		fontWeight: 'bold',
	}
});

AppRegistry.registerComponent('tryReactNative', () => StatusBarTranslucentExample);